<script setup>
import MainCom from '@/components/MainCom.vue';
import AsideCom from '@/components/AsideCom.vue';
import HeaderCom from '@/components/HeaderCom.vue';
import logo from '@/assets/img/maomi.png'

import { ref, watch } from 'vue';

// ----------------------------------------------
import { useUserStore } from '@/store/userStore'; // 引入 Pinia 的用户状态
// 创建用户状态实例
const userStore = useUserStore();


// 定义左边侧边栏是否收起状态
const collapse = ref(false);
// 设置图标初始状态
const headerLeft = ref('Fold');
// 定义左边侧边栏的宽度
const asideWidth = ref('200px');
// 定义图标Logo
const logoRef = ref(logo);
// 定义开启关闭动画
const isOpen = ref(true)

// 监听 collapse 的变化更新 headerLeft 和 asideWidth
watch(collapse, (current) => {
  headerLeft.value = current? 'Expand' : 'Fold';
  asideWidth.value = current? '64px' : '200px';
});
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="asideWidth" :class="{ 'sidebar-transition': true }">
        <div class="logo-box">
          <el-image style="width: 32px; height: 32px" :src="logoRef"></el-image>
          <h4 v-show="!collapse" class="gradient-text">什么什么系统</h4>
        </div>
        <AsideCom :collapse="collapse" :collapse-transition=isOpen  />
      </el-aside>

      <el-container>
        <!-- 头部 -->
        <el-header>
          <!-- 将用户数据传递给 HeaderCom -->
          <HeaderCom 
            :collapse="collapse" 
            :header-left="headerLeft" 
            @toggleCollapse="collapse =!collapse"
            :user-data="userStore.userData" />
        </el-header>


        <!-- 内容 -->
        <el-main>
          <MainCom />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss">
* {
  user-select: none;
  margin: 0;
  padding: 0;
}

html,
body,
#app,
.common-layout,
.el-container.el-aside.el-main {
  height: 100%;
  margin: 0;
}

.common-layout {
  display: flex;
  flex-direction: column;

  .el-header {
    background-color: white;
    height: 50px;
    // line-height: 50px;
    color: white;
    // text-align: center;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }

  .el-aside {
    background-color: #545c64;

    .logo-box{
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      color: #FFF;
    }

    &.sidebar-transition {
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  .el-main {
    background-color: #FFF;
    --el-main-padding: 5px;
  }
}

/* 创建一个类名为gradient-text的样式 */
.gradient-text {
    background: linear-gradient(to right, #FFF, #81ecec, #fd79a8); /* 设置从左到右的红、绿、蓝三色渐变背景 */
    -webkit-background-clip: text; /* 对于WebKit浏览器（如Chrome、Safari）设置背景裁剪为只作用于文字 */
    background-clip: text; /* 标准语法，设置背景裁剪为只作用于文字 */
    color: transparent; /* 将文字颜色设置为透明，这样就只显示渐变背景裁剪后的效果作为文字颜色 */
}
</style>
